import './View.scss';
import React, { PureComponent as Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Table, Row, Col } from 'antd';
import { Link } from 'react-router-dom';
import { formatTime } from "../../../../common";
import { fetchMethodData } from '../../../../reducer/modules/dubboMethod'
import { jsonToBody as paramsJsonToBody } from '../../../../components/TreeView/Tools/MethodBodyFunc.js';
// import { format } from 'path';


@connect(state => {
  return {
    curMethod: state.dubboMethod.curMethod,
    curInterfaceBaseInfo: state.dubboInterface.infBaseInfo
  };
}, {
  fetchMethodData
})
class View extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    curMethod: PropTypes.object,
    curInterfaceBaseInfo: PropTypes.object,
    fetchMethodData: PropTypes.func
  };

  getDataSource = (data, i) => {
    let ret = [];
    data.map((item, index) => {
      ret.push({
        key: i + "_" + index,
        name: item.name,
        name_cn: item.name_cn,
        field_type: item.field_type,
        length: item.length,
        default: item.default,
        desc: item.desc,
        required: (!(item.required == undefined) && item.required) == 1 ? "是" : "否",
        children: item.children ? this.getDataSource(item.children, i + "_" + index) : undefined
      })
    })
    return ret;
  };

  req_and_res_function_table(data) {
    const columns = [
      {
        title: '字段名',
        dataIndex: 'name',
        width: '15%',
        key: 'name'
      },
      {
        title: '是否必需',
        dataIndex: 'required',
        width: '13%',
        key: 'required'
      },
      {
        title: '字段名称',
        dataIndex: 'name_cn',
        width: '20%',
        key: 'name_cn'
      },
      {
        title: '类型',
        dataIndex: 'field_type',
        width: '10%',
        key: 'field_type'
      },
      {
        title: '长度',
        dataIndex: 'length',
        width: '12%',
        key: 'length'
      },
      {
        title: '默认值',
        dataIndex: 'default',
        width: '15%',
        key: 'default'
      },
      {
        title: '备注',
        dataIndex: 'desc',
        width: '18%',
        key: 'desc'
      }
    ];

    let dataSource = [];
    if (data && typeof (data) === 'string') {
      data = paramsJsonToBody(data);
    }
    if (data && data.length) {
      dataSource = this.getDataSource(data, 1);
    }
    return (
      <Table bordered size="small" pagination={false} childrenColumnName='children' columns={columns} dataSource={dataSource} />
    );
  }

  getBasicInfoView = (data) => {
    const process = (data) => {
      const statusMap = {
        0: '设计中',
        1: 'sit测试',
        2: 'uat测试',
        3: '已上线'
      };
      const ischlMap = {
        0: '否',
        1: '是'
      }
      const isapiMap = {
        0: '否',
        1: '是'
      }

      const getStatus = status => statusMap[status];
      const getIschl = ischl => ischlMap[ischl];
      const getIsapi = isapi => isapiMap[isapi];
      data.status = getStatus(data.status);
      data.ischl = getIschl(data.ischl);
      data.isapi = getIsapi(data.isapi);
      data.ctime = data.ctime == undefined ? '暂无' : formatTime(data.ctime);
      data.etime = data.etime == undefined ? '暂无' : formatTime(data.etime);
      data.chltype = data.ischl === '是' ? (data.chltype == undefined ? '无' : data.chltype) : '无';
      data.url = data.isapi === '是' ? (data.url == undefined ? '无' : data.url) : '无';
      data.onlinedate = data.onlinedate == undefined ? '暂无' : data.onlinedate;
      return data;
    }
    data = process(data);
    const getStatusStype = (status) => {
      const statusMap = {
        '设计中': 'design',
        'sit测试': 'insit',
        'uat测试': 'inuat',
        '已上线': 'online'
      }
      return statusMap[status]
    }
    return (
      <div className="panel-view">
        <Row className="row">
          <Col span={4} className="colKey">
            方&ensp;法&ensp;名：
          </Col>
          <Col span={8} className="colValue">
            {data.mname}
          </Col>
          <Col span={4} className="colKey">
            方法名称：
          </Col>
          <Col span={8} className="colValue">
            {data.cname}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            所属接口：
          </Col>
          <Col span={8} className="colValue">
            {data.intername}
          </Col>
          <Col span={4} className="colKey">
            上线时间：
          </Col>
          <Col span={8} className="colValue">
            {data.onlinedate}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            请求类名：
          </Col>
          <Col span={8} className="colValue">
            {data.inname}
          </Col>
          <Col span={4} className="colKey">
            应答类名：
          </Col>
          <Col span={8} className="colValue">
            {data.outname}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            创&ensp;建&ensp;人：
          </Col>
          <Col span={8} className="colValue">
            {data.cuserid == undefined ? '' :
              (<Link className="user-name" to={'/user/profile/' + data.cuserid}>
                <img src={'/api/user/avatar?uid=' + data.cuserid} className="user-img" />
                {data.cusername}
              </Link>)
            }
          </Col>
          <Col span={4} className="colKey">
            创建时间：
          </Col>
          <Col span={8} className="colValue">
            {data.ctime}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            更&ensp;新&ensp;人：
          </Col>
          <Col span={8} className="colValue">
            {data.euserid == undefined ? '' :
              (<Link className="user-name" to={'/user/profile/' + data.euserid}>
                <img src={'/api/user/avatar?uid=' + data.euserid} className="user-img" />
                {data.eusername}
              </Link>)
            }
          </Col>
          <Col span={4} className="colKey">
            更新时间：
          </Col>
          <Col span={8} className="colValue">
            {data.etime}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            渠道交易：
          </Col>
          <Col span={8} className="colValue">
            {data.ischl}
          </Col>
          <Col span={4} className="colKey">
            渠道编号：
          </Col>
          <Col span={8} className="colValue">
            {data.chltype}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            Api：
          </Col>
          <Col span={8} className="colValue">
            {data.isapi}
          </Col>
          <Col span={4} className="colKey">
            Api地址：
          </Col>
          <Col span={8} className="colValue">
            {data.url}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            状&emsp;&emsp;态：
          </Col>
          <Col span={20} className={'tag-status ' + getStatusStype(data.status)}>
            {data.status}
          </Col>
        </Row>
        <Row className="row">
          <Col span={4} className="colKey">
            方法描述：
          </Col>
          <Col span={20} className="colValue">
            <div
              className="tui-editor-contents"
              style={{ margin: '0px', padding: '0px 20px', float: 'none' }}
              dangerouslySetInnerHTML={{ __html: data.desc }}
            />
          </Col>
        </Row>
      </div>
    )
  }

  render() {
    const { outbody, inbody } = this.props.curMethod;
    let basicData = Object.assign({}, this.props.curMethod);
    basicData.intername = this.props.curInterfaceBaseInfo == undefined ? '' : this.props.curInterfaceBaseInfo.cname

    let res = (
      <div className="caseContainer">
        <h2 className="interface-title" style={{ marginTop: 0 }}>
          基本信息
        </h2>
        {this.getBasicInfoView(basicData)}
        <div className="resinterface-titleponse" style={{ display: '' }}>
          <h2 className="interface-title" style={{ marginTop: 0 }}>
            请求字段
          </h2>
          {this.req_and_res_function_table(inbody)}
        </div>
        <div className="resinterface-titleponse" style={{ display: '' }}>
          <h2 className="interface-title" style={{ marginTop: 0 }}>
            应答字段
          </h2>
          {this.req_and_res_function_table(outbody)}
        </div>
      </div>
    );

    return res;
  }
}

export default View;
